<template>
  <div class="app-container">

    <!--  1-搜索框             -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" >

        <el-form-item>
          <el-input placeholder="品种名称" v-model="searchName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="doFilter()"><i class="el-icon-search"></i>搜索</el-button>
        </el-form-item>


        <!-- 新增品种条目信息按钮  -->
        <el-form-item>
          <el-button type="primary" @click="addLocalSpecies()">新增</el-button>
        </el-form-item>

        <!-- "导出"按钮 -->
        <el-form-item>
          <el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
        </el-form-item>

      </el-form>
    </el-col>

    <!-- 2-列表              -->
    <el-table :data="tableList" max-height="550" v-loading="listLoading" border element-loading-text="拼命加载中" style="width: 60%;">

      <el-table-column prop="speciesId" label="品种ID" ></el-table-column>
      <el-table-column prop="name" label="品种名" ></el-table-column>
      <el-table-column prop="maleParentId" label="父本ID" ></el-table-column>
      <el-table-column prop="femaleParentId" label="母本ID" ></el-table-column>
      <el-table-column prop="projectId" label="项目编号" ></el-table-column>
      <el-table-column prop="experimentType" label="试验类型" ></el-table-column>
      <el-table-column prop="leafColour" label="叶颜色" ></el-table-column>
      <el-table-column prop="corollaColour" label="花冠色" ></el-table-column>
      <el-table-column prop="flowering" label="花繁茂性" ></el-table-column>
      <el-table-column prop="steamColour" label="茎色" ></el-table-column>
      <el-table-column prop="openpollinated" label="天然结实性" ></el-table-column>
      <el-table-column prop="uniformityOfTuberSize" label="整齐度" ></el-table-column>
      <el-table-column prop="tuberShape" label="薯型" ></el-table-column>
      <el-table-column prop="skinSmoothness" label="薯皮类型" ></el-table-column>
      <el-table-column prop="eyeDepth" label="芽眼深浅" ></el-table-column>
      <el-table-column prop="skinColour" label="皮色" ></el-table-column>
      <el-table-column prop="fleshColour" label="肉色" ></el-table-column>
      <el-table-column prop="isChoozen" label="是否入选" ></el-table-column>


      <el-table-column prop="operation" label="操作 ">
        <template slot-scope="scope">


          <!--<el-button size="mini" type="success" @click="getInSpeciesDetail(scope.row)">进入</el-button>-->

          <el-button size="mini" type="success" @click="getInSpeciesDetail(scope.row)">进入</el-button>
          <el-button size="mini" type="primary" @click="editSpeciesDetail(scope.row)">编辑</el-button>
<!--          <el-button size="small" type="danger" @click="deleteUpdate(scope.row)">删除</el-button>-->

        </template>
      </el-table-column>

    </el-table>


    <!--  3-分页插件的工具条                 -->
    <el-pagination layout="total, prev, pager, next"
                   background
                   :page-size="10"
                   @size-change="handleSizeChange"
                   :total="total"
                   @current-change="handleCurrentChange"
                   style="text-align:center;">
    </el-pagination>

    <!-- 4-隐藏页面-编辑localSpecies信息弹窗                      -->
    <el-dialog title="编辑" :visible.sync="isShowEditVisible">

      <el-form label-width="80px" :model="this.tempSpeciesMsg" ref="dataForm">
        <el-form-item label="品种名称" prop="name">
          <el-input v-model="tempSpeciesMsg.name"></el-input>
        </el-form-item>
        <el-form-item label="项目ID" prop="projectId">
          <el-input v-model="tempSpeciesMsg.projectId"></el-input>
        </el-form-item>
        <el-form-item label="父本ID" prop="maleParentId">
          <el-input v-model="tempSpeciesMsg.maleParentId"></el-input>
        </el-form-item>
        <el-form-item label="母本ID" prop="femaleParentId">
          <el-input v-model="tempSpeciesMsg.femaleParentId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowEditVisible = false">取消</el-button>
        <el-button type="primary" :loading="listLoading" @click="updateData( tempSpeciesMsg )" class="编辑">确定</el-button>
      </div>

    </el-dialog>

    <!-- 5-新增品种弹窗详情 -->
    <el-dialog title="Edit1" :visible.sync="isShowAddVisible">

      <el-form label-width="80px" :model="localSpeciesMsg" ref="dataForm">
        <el-form-item label="品种名称" prop="fname">
          <el-input v-model="localSpeciesMsg.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddVisible = false">取消</el-button>
        <el-button type="primary" :loading="listLoading" @click="addSumbit(localSpeciesMsg)" class="title1">确定</el-button>
      </div>

    </el-dialog>

    <!-- 6-删除本地品种资源库弹框                           -->
    <el-dialog
      title="删除"
      :visible.sync="deleteVisible"
      width="30%">
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 7-新增大田信息 -->

  </div>
</template>


<script>
  import { addLocalSpecies, getLocalSpecies, deleteLocalSpecies, updateLocalSpecies,updateSpeciesPic } from '../../api/SpeciesManage'

  export default {

    data() {
      return {

        filename: '', // 列表导出为excel的文件名
        tableList: [],
        totalData: [],
        listLoading: true,
        isShowEditVisible: false,
        isShowAddVisible: false,
        deleteVisible: false,
        temp: {
          uid: '',
          cname: '',
          date: '',
          status: ''
        },
        localSpeciesMsg: {
          speciesId: '',
          name: ''
        },
        total: 0,
        page: 1,
        pageSize: 10,
        status: [
          {
            statusId: 1,
            label: '启用'
          }, {
            statusId: 0,
            label: '禁用'
          }
        ],

        value: '',
        searchName: '',
        filterTableDataEnd: [],

        tempSpeciesMsg: {
          speciesId: '',
          name: '',
          projectId: '',
          maleParentId: '',
          femaleParentId: ''
        }
      }
    },

    created() {
      // 刚打开页面时就去取数据；
      this.fetchData()
    },

    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },

    methods: {
      // 列表导出为excel
      handleDownload() {
        this.downloadLoading = true
        const date = new Date()
        this.filename = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes()
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['品种ID','父本ID', '母本ID', '所属项目ID', '试验类型', '叶颜色', '花冠色', '花繁茂性', '茎色', '天然结实性', '整齐度',
            '薯形', '薯皮类型', '芽眼深浅', '皮色', '肉色', '是否入选']
          const filterVal = ['speciesId', 'maleParentId', 'femaleParentId', 'projectId', 'experimentType', 'leafColour', 'corollaColour', 'flowering',
            'stemColour', 'openPollinated', 'uniformityOfTuberSize', 'tuberShape', 'skinSmoothness', 'eyeDepth', 'skinColour', 'fleshColour','isChoozen']
          //const list = this.tableList
          const list = this.totalData
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: this.autoWidth
          })
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },

      // 新增localSpecies更新数据
      addSumbit( localSpeciesMsg ) {
        this.listLoading = true
        addLocalSpecies({ 'name': localSpeciesMsg.name }).then(response => {
          if (response.data.success === true) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 5000
            })
          } else {
            this.$notify({
              title: '失败',
              message: response.data.msg,
              type: 'failure',
              duration: 5000
            })
          }
          this.fetchData()
        })
        this.isShowAddVisible = false
      },

      getInShotList( farmland ) {
        this.GLOBAL.farmland = farmland
        console.log(farmland)
        this.$router.push('/browser')
      },
      getInSpeciesDetail(species) {
        this.GLOBAL.species.speciesId = species.speciesId
        console.log('AAAAAA' + species.speciesId)
       // this.$router.push('/speciesmodule/speciesdetail')
        this.$router.push('/speciesmodule/testIDInSpecies')
      },
      editSpeciesDetail(species) {
        this.isShowEditVisible = true
        this.tempSpeciesMsg.speciesId = species.speciesId
        console.log("获取品种ID" + this.tempSpeciesMsg.speciesId)

      },

      fetchData() {
        this.listLoading = true
        getLocalSpecies({ }).then(response => {

            const limit = 10
            // 居然在前端做筛选，牛逼！
            this.totalData = response.data.rows
            const pageList = response.data.rows.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
            // console.log(pageList)
            this.total = response.data.total
            this.tableList = pageList
            this.listLoading = false
        })
      },

      doFilter() {
        if (this.searchName === '') {
          this.fetchData()
          this.$message.warning('查询条件不能为空！')
          return
        }
        console.log(this.searchName)

        this.listLoading = true
        getLocalSpecies({ 'name': this.searchName }).then(response => {
          const limit = 10
          // 居然在前端做筛选，牛逼！
          const pageList = response.data.rows.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
          // console.log(pageList)
          this.total = response.data.total
          this.tableList = pageList
          this.listLoading = false
        })
      },

      clickfun(e) {
        console.log(e.target.innerText)
      },

      handleUpdate(row) {
        this.isShowEditVisible = true
        this.temp = Object.assign({}, row)
        console.log(row)
      },

      addLocalSpecies() {
        this.isShowAddVisible = true
        console.log()
      },

      deleteUpdate(row) {
        console.log(row)
        this.deleteVisible = true
        this.temp = Object.assign({}, row)
        this.speciesId = row.speciesId
      },

      submitDelete() {

        deleteLocalSpecies(this.speciesId).then(response => {
          console.log("删除ID----" + this.speciesId)
          this.fetchData()
        })

        this.deleteVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      },

      handlePicUploadSuccess(res, file) {
        console.log(res)
        console.log(file)

        updateSpeciesPic()
        this.curSpecies.img1 = res.msg
        this.speciesImgs.img1 = this.GLOBAL.nginxPath + this.curSpecies.img1
        console.log(this.curSpecies.img1)
      },

      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        console.log(row)
        row.status = status
      },

      updateData() {
        this.listLoading = true
        updateLocalSpecies( this.tempSpeciesMsg ).then(response => {
          if (response.data.success === true) {
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 5000
            })
          } else {
            this.$notify({
              title: '失败',
              message: response.data.msg,
              type: 'failure',
              duration: 5000
            })
          }
          this.fetchData()
        })
        this.isShowEditVisible = false
      },

      handleSizeChange(val) {
        this.page = val
        console.log(this.page)
        this.fetchData()
      },

      handleCurrentChange(val) {
        this.page = val
        console.log(this.page)
        this.fetchData()
      },

      currentChangePage(list) {
        let from = (this.page - 1) * this.pageSize
        const to = this.page * this.pageSize
        this.tableList = []
        for (; from < to; from++) {
          if (list[from]) {
            this.tableList.push(list[from])
          }
        }
      }


    }
  }

</script>

